<template>
  <a-modal title="资质详情" :width="720" :visible="visible" :confirmLoading="confirmLoading" :maskClosable="false"
    :destroyOnClose="true" @ok="handleSubmit" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <!-- 供应商 -->
        <div v-if="record.is_super == 0">
          <a-form-item label="业务人员姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['name', { rules: [{ required: true, min: 1, message: '请输入至少1个字符' }] }]" disabled />
          </a-form-item>
          <a-form-item label="业务联系人手机号:" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['mobile', { rules: [{ required: true, min: 1, message: '请输入至少1个字符' }] }]" disabled />
          </a-form-item>
          <a-form-item label="企业办公地址:" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['address', { rules: [{ required: true, min: 1, message: '请输入至少1个字符' }] }]"
              disabled />
          </a-form-item>
          <a-form-item label="营业执照:" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <div class="imgs">
              <a title="点击查看原图" :href="record.license_image ? record.license_image.preview_url : ''" target="_blank">
                <div class="img">
                  <img :src="record.license_image ? record.license_image.preview_url : ''">
                </div>
              </a>
              <!-- 加* -->
              <a-input v-show="false"
                v-decorator="['card', { rules: [{ required: true, min: 1, message: '请输入至少1个字符' }] }]" disabled />
            </div>
          </a-form-item>
          <a-form-item label="组织机构代码:" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['organizing_code', { rules: [{ required: true, min: 1, message: '请输入至少1个字符' }] }]"
              disabled />
          </a-form-item>
        </div>
        <!-- 采购商 -->
        <div v-if="record.is_super == 2">
          <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['name', { rules: [{ required: true, min: 1, message: '请输入至少1个字符' }] }]" disabled />
          </a-form-item>
          <a-form-item label="身份证号" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['card', { rules: [{ required: true, min: 1, message: '请输入至少1个字符' }] }]" disabled />
          </a-form-item>
          <a-form-item label="身份证" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <div class="imgs">
              <a title="点击查看原图" :href="record.card_image ? record.card_image.preview_url : ''" target="_blank">
                <div class="img">
                  <img :src="record.card_image ? record.card_image.preview_url : ''">
                </div>
              </a>
              <a title="点击查看原图" :href="record.card_image2 ? record.card_image2.preview_url : ''" target="_blank">
                <div class="img">
                  <img :src="record.card_image2 ? record.card_image2.preview_url : ''">
                </div>
              </a>
              <a-input v-show="false"
                v-decorator="['card', { rules: [{ required: true, min: 1, message: '请输入至少1个字符' }] }]" disabled />
            </div>
          </a-form-item>
          <a-form-item label="联系人手机号:" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['mobile', { rules: [{ required: true, min: 1, message: '请输入至少1个字符' }] }]" disabled />
          </a-form-item>
        </div>

        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <!-- extra="是否审核成功" -->
          <a-radio-group @change="changeRadio"
            v-decorator="['status', { initialValue: auditing, rules: [{ required: true }] }]">
            <a-radio :value="1">审核中</a-radio>
            <a-radio :value="3">通过</a-radio>
            <a-radio :value="2">驳回</a-radio>
          </a-radio-group>
          <a-textarea @blur="tareaBlur" @change="tareaBlur" v-if="auditingValue == 2" v-model="reason"
            placeholder="请输入驳回理由" :autoSize="{ minRows: 4 }" />
          <div class="tip" v-if="auditingValue == 2 ? reasonShow : ''">请输入至少1个字符</div>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import _ from 'lodash'
import * as Api from '@/api/auditing'
import { Ueditor, SelectImage } from '@/components'
import { log } from '@/api/market/points'

export default {
  components: {
    SelectImage,
    Ueditor
  },
  props: {
    // 分类列表
    // categoryList: {
    //   type: Array,
    //   required: true
    // }
  },
  data() {
    return {
      // 对话框标题
      title: '',
      // 标签布局属性
      labelCol: { span: 7 },
      // 输入框布局属性
      wrapperCol: {
        span: 13
      },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),
      // 上级分类列表
      categoryListTree: [],
      categoryList: [],
      // 当前记录
      record: {},

      auditing: 1,
      auditingValue: 1,
      reason: '',
      reasonShow: false,
    }
  },
  methods: {
    // 显示对话框
    info(record) {

      // 显示窗口
      this.visible = true

      // 当前分类记录
      this.record = record

      this.auditing = this.record.certification_status
      this.auditingValue = this.record.certification_status
      this.reason = ''

      if (this.auditingValue == 2) {
        this.reason = record.err_message
      }

      // 获取分类列表
      // this.getCategoryList()
      // 设置默认值
      this.setFieldsValue()
    },

    // 设置默认值
    setFieldsValue() {
      const { record, form: { setFieldsValue } } = this
      // 设置表单内容
      this.$nextTick(() => {
        setFieldsValue(_.pick(record, ['name', 'card', 'mobile', 'address', 'organizing_code', 'status', 'sort']))
      })
    },

    changeRadio(e) {
      this.auditingValue = e.target.value
    },

    tareaBlur(e) {
      if (this.auditingValue == 2) {
        if (this.reason.replace(/\s+/g, '').length > 0) {
          this.reasonShow = false
        } else {
          this.reasonShow = true
        }
      }
    },

    // 确认按钮
    handleSubmit(e) {
      this.tareaBlur()
      if (this.auditingValue == 2 ? !this.reasonShow : true) {
        Api.status({ certificationId: this.record['certification_id'], status: this.auditingValue , message: this.reason})
          .then(result => {
            // 显示成功
            this.$message.success(result.message, 1.5)
            // 关闭对话框事件
            this.handleCancel()

            this.$emit('handleSubmit')
          })
          .finally(result => {
            this.confirmLoading = false
          })
      }
    },

    // 关闭对话框事件
    handleCancel() {
      this.visible = false
      this.form.resetFields()
    },

  }
}
</script>
<style scoped>
.imgs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.img {
  width: 130px;
  height: 90px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-right: 20px;
}

.img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cate {
  display: flex;
  align-items: center;
}

.tip {
  color: #f5222d;
  line-height: normal;
}
</style>